<template>
    <div class="page">
        <breadcrumb :breadcrumb="breadcrumb"></breadcrumb>
        <div class="products-module products-bottom relative">
            <div class="container">
                <div class="row">
                    <div class="products-container clearfix">
                        <color-slider :items="productView.colorSlider"></color-slider>
                        <product-info-title :items="productView.productInfoTitle"></product-info-title>
                        <product-media :items="productView.productMedia"></product-media>
                        <add-to-cart :qty="productView.product_qty" :attributes="productView.product_attributes" v-on:openCart="openCart"></add-to-cart>
                    </div>
                </div>
            </div>
        </div>
        <description :items="productView.description"></description>
        <included :items="productView.included"></included>
        <div class="products-reviews">
            <div class="recommended-title">Ratings and Reviews</div>
        </div>
        <div v-if="loading" class="loading">
            <div class="layer-fixed loading-con">
                <span>Please wait...</span>
            </div>
        </div>
    </div>
</template>
<script>
import api from '../http'
import breadcrumb from '../components/common/Breadcrumbs'
import ColorSlider from '../components/Product/ColorSlider'
import ProductInfoTitle from '../components/Product/ProductInfoTitle'
import ProductMedia from '../components/Product/ProductMedia'
import AddToCart from '../components/Product/AddToCart'
import description from '../components/Product/Description'
import included from '../components/Product/Included'
export default {
    data() {
        return {
            loading: false,
            breadcrumb: [],
            productView: {
                product_qty: 0, // 库存
                colorSlider: [], // 关联颜色
                productInfoTitle: [], // 商品标题，sku以及价格信息
                productMedia: [], // 左侧大图展示
                product_attributes: [], // 右侧Details
                description: [], // 描述
                included: [] // 包含的配件
            }
        }
    },
    components: {
        breadcrumb,
        ColorSlider,
        ProductInfoTitle,
        ProductMedia,
        AddToCart,
        description,
        included
    },
    mounted() {
        api.GetProductView().then(response => {
            this.breadcrumb = response.data.breadcrumb
            this.productView = response.data.productView
        })
    },
    methods: {
        openCart() {
            this.$parent.showCartSlider = true
        }
    }
}
</script>
<style>
.products-bottom {
    padding-bottom: 30px;
    border-bottom: 6px #EFEFEF solid;
}

@media (max-width: 991px) {
    .products-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .products-container {
        margin-top: 30px;
    }
}
</style>
